<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <link rel="stylesheet" href="./7-1myl.css" />
  <script src="./echarts/echarts.js"></script>
  <!-- <style>
        .box{
            width: 100%;
            height: 100%;
            background-color: darkgray;
        }
        .box1{
            width: 100%;
            height: 20rem;
            background-color: aliceblue;
        }
        .box2{
            width: 100%;
            height: 3.75rem;
            
        }
        .box2 span{
            font-size: 1.25rem;
            font-weight: 600;
        }
        .box3{
            width: 100%;
            height: 12.5rem;
            display: flex;
            justify-content: space-around;
            flex-wrap: nowrap;
            align-items: center;
        }
        .box4{
            width: 18.75rem;
            height: 12.5rem;
            background-color: aqua;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .Image{
            width: 5.625rem;
            height: 5.625rem;
            border-radius: 3.125rem;
            background-color: #72d8a3;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box4 img{
            width: 3.75rem;
            height: 3.75rem;
            
        }
        .box5 {
            width: 12.5rem;
            height: 12.5rem;
        }
        
        .box5 p{
            width: 7.5rem;
            height: 1.25rem;
            text-align: center;
            margin-left: 20px;
            margin-top: 30%;
        }
        #digit{
            width: 120px;
            height: 50px;
            font-size: 35px;
            text-align: center;
            flex-direction: row;
            margin-left: 40px;
        }
        .box6{
            width: 300px;
            height: 200px;
            background-color: aqua;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .Image{
            width: 90px;
            height: 90px;
            border-radius: 50px;
            background-color: #72d8a3;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box6 img{
            width: 60px;
            height: 60px;
            
        }
        .box7 {
            width: 200px;
            height: 200px;
        }
        
        .box7 p{
            width: 120px;
            height: 20px;
            text-align: center;
            margin-left: 20px;
            margin-top: 30%;
        }
        #digit{
            width: 120px;
            height: 50px;
            font-size: 35px;
            text-align: center;
            flex-direction: row;
            margin-left: 40px;
        }
        .box8{
            width: 300px;
            height: 200px;
            background-color: aqua;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .Image{
            width: 90px;
            height: 90px;
            border-radius: 50px;
            background-color: #72d8a3;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box8 img{
            width: 60px;
            height: 60px;
            
        }
        .box9 {
            width: 200px;
            height: 200px;
        }
        
        .box9 p{
            width: 120px;
            height: 20px;
            text-align: center;
            margin-left: 20px;
            margin-top: 30%;
        }
        #digit{
            width: 120px;
            height: 50px;
            font-size: 35px;
            text-align: center;
            flex-direction: row;
            margin-left: 40px;
        }
        .box10{
            width: 300px;
            height: 200px;
            background-color: aqua;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .Image{
            width: 90px;
            height: 90px;
            border-radius: 50px;
            background-color: #72d8a3;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box10 img{
            width: 60px;
            height: 60px;
            
        }
        .box11 {
            width: 200px;
            height: 200px;
        }
        
        .box11 p{
            width: 120px;
            height: 20px;
            text-align: center;
            margin-left: 20px;
            margin-top: 30%;
        }
        #digit{
            width: 120px;
            height: 50px;
            font-size: 35px;
            text-align: center;
            flex-direction: row;
            margin-left: 40px;
        }
        .box12{
            width: 100%;
            height: 400px;
            background-color: aliceblue;
            margin-top: 30px;
        }
    </style> -->
</head>

<body>
  <div class="box">
    <div class="box1">
      <div class="box2">
        <p>
          <span>会员累计数据</span> 数据更新于2022-7-01 07:35:12, 每日更新一次
          <img src="./img/微信图片_20220701160203.png" alt="" /> 说明
        </p>
      </div>
      <div class="box3">
        <div class="box4">
          <p class="Image">
            <img src="./img/微信截图_20220701191609.png" alt="" />
          </p>
          <div class="box5">
            <p>累计会员数</p>
            <p class="digit"></p>
            <!-- <span id="digit"></span> -->
          </div>
        </div>
        <div class="box6">
          <p class="Imag">
            <img src="./img/微信截图_20220701191631.png" alt="" />
          </p>
          <div class="box7">
            <p>访问会员数</p>
            <p class="digit"></p>
            <!-- <span id="jhiht"></span> -->
          </div>
        </div>
        <div class="box8">
          <p class="Imae">
            <img src="./img/微信截图_20220701191657.png" alt="" />
          </p>
          <div class="box9">
            <p>付费会员数</p>
            <p class="digit"></p>
            <!-- <span id="number"></span> -->
          </div>
        </div>
        <div class="box10">
          <p class="mage">
            <img src="./img/微信截图_20220701191712.png" alt="" />
          </p>
          <div class="box11">
            <p>流失率</p>
            <p class="digit"></p>
            <!-- <span id="num"></span> -->
          </div>
        </div>
      </div>
    </div>
    <div id="box12"></div>
  </div>
</body>
<script>
  $.ajax({
    url: "http://qqq/log.php",
    type: "get",
    dataType: "json",
    success: function (arr) {
      console.log(arr);
      $(".digit").eq(0).html(arr.member_count);
      $(".digit").eq(1).html(arr.member_view_count);
      $(".digit").eq(2).html(arr.order_pay_member_count);
      $(".digit").eq(3).html(arr.un_view_scale);
    },
  });

  // echarts 线性图
  // var chartDom = document.getElementById("box12");
  // var myChart = echarts.init(chartDom);
  // var option;

  // option = {
  //     title: {
  //         text: '今日&昨日',
  //         left: '50%',
  //         textAlign: 'center'
  //     },
  //     tooltip: {
  //         trigger: 'axis',
  //         axisPointer: {
  //             lineStyle: {
  //                 color: '#ddd'
  //             }
  //         },
  //         backgroundColor: 'rgba(255,255,255,1)',
  //         padding: [5, 10],
  //         textStyle: {
  //             color: '#7588E4',
  //         },
  //         extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
  //     },
  //     legend: {
  //         right: 20,
  //         orient: 'vertical',
  //         data: ['今日', '昨日']
  //     },
  //     xAxis: {
  //         type: 'category',
  //         data: ['2022-06-01', '2022-06-03', '2022-06-05', '2022-06-07', '2022-06-09', '2022-06-011', '2022-06-013', '2022-06-015', '2022-06-017', '2022-06-019', '2022-06-21', "2022-06-23", "2022-06-25", "2022-06-27", "2022-06-29",],
  //         boundaryGap: false,
  //         splitLine: {
  //             show: true,
  //             interval: 'auto',
  //             lineStyle: {
  //                 color: ['#D4DFF5']
  //             }
  //         },
  //         axisTick: {
  //             show: false
  //         },
  //         axisLine: {
  //             lineStyle: {
  //                 color: '#609ee9'
  //             }
  //         },
  //         axisLabel: {
  //             margin: 10,
  //             textStyle: {
  //                 fontSize: 14
  //             }
  //         }
  //     },
  //     yAxis: {
  //         type: 'value',
  //         splitLine: {
  //             lineStyle: {
  //                 color: ['#D4DFF5']
  //             }
  //         },
  //         axisTick: {
  //             show: false
  //         },
  //         axisLine: {
  //             lineStyle: {
  //                 color: '#609ee9'
  //             }
  //         },
  //         axisLabel: {
  //             margin: 10,
  //             textStyle: {
  //                 fontSize: 14
  //             }
  //         }
  //     },
  //     series: [{
  //         name: '今日',
  //         type: 'line',
  //         smooth: true,
  //         showSymbol: false,
  //         symbol: 'circle',
  //         symbolSize: 6,
  //         data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
  //         areaStyle: {
  //             normal: {
  //                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  //                     offset: 0,
  //                     color: 'rgba(199, 237, 250,0.5)'
  //                 }, {
  //                     offset: 1,
  //                     color: 'rgba(199, 237, 250,0.2)'
  //                 }], false)
  //             }
  //         },
  //         itemStyle: {
  //             normal: {
  //                 color: '#f7b851'
  //             }
  //         },
  //         lineStyle: {
  //             normal: {
  //                 width: 3
  //             }
  //         }
  //     }, {
  //         name: '昨日',
  //         type: 'line',
  //         smooth: true,
  //         showSymbol: false,
  //         symbol: 'circle',
  //         symbolSize: 6,
  //         data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
  //         areaStyle: {
  //             normal: {
  //                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  //                     offset: 0,
  //                     color: 'rgba(216, 244, 247,1)'
  //                 }, {
  //                     offset: 1,
  //                     color: 'rgba(216, 244, 247,1)'
  //                 }], false)
  //             }
  //         },
  //         itemStyle: {
  //             normal: {
  //                 color: '#58c8da'
  //             }
  //         },
  //         lineStyle: {
  //             normal: {
  //                 width: 3
  //             }
  //         }
  //     }]
  // };

  //

  // var myChart = echarts.init(document.getElementById("box12"));
  // option = {
  //   tooltip: {
  //     trigger: "axis",
  //   },

  //   grid: {
  //     left: "3%",
  //     right: "4%",
  //     bottom: "3%",
  //     containLabel: true,
  //   },
  //   toolbox: {
  //     feature: {
  //       saveAsImage: {},
  //     },
  //   },
  //   xAxis: {
  //     type: "category",
  //     boundaryGap: false,
  //     data: [
  //       "2022-06-01",
  //       "2022-06-03",
  //       "2022-06-05",
  //       "2022-06-07",
  //       "2022-06-09",
  //       "2022-06-011",
  //       "2022-06-13",
  //       "2022-06-15",
  //       "2022-06-17",
  //       "2022-06-19",
  //       "2022-06-21",
  //       "2022-06-23",
  //       "2022-06-25",
  //       "2022-06-27",
  //       "2022-06-29",
  //     ],
  //   },
  //   legend: {
  //     data: ["新增会员数", "新增访客数"],
  //   },
  //   yAxis: {
  //     type: "value",
  //   },
  //   series: [
  //     {
  //       name: "新增会员数",
  //       type: "line",
  //       stack: "总量",
  //       data: [],
  //     },
  //     {
  //       name: "新增访客数",
  //       type: "line",
  //       stack: "总量",
  //       data: [],
  //     },
  //   ],
  // };




  var myChart = echarts.init(document.getElementById('box12'));
 option = {
            tooltip: {
                trigger: 'axis'
            },
           
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['2022-06-01', '2022-06-03', '2022-06-05', '2022-06-07', '2022-06-09', '2022-06-011',
                    '2022-06-13', '2022-06-15', '2022-06-17', '2022-06-19', '2022-06-21', "2022-06-23",
                    '2022-06-25', '2022-06-27', '2022-06-29'
                ],
            },
            legend: {
                data: ['新增会员数', '新增访客数']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                    name: '新增会员数',
                    type: 'line',
                    stack: '总量',
                    data: []
                },
                {
                    name: '新增访客数',
                    type: 'line',
                    stack: '总量',
                    data: []
                },

            ]
        };
        $.ajax({
            url: 'http://qqq/index.php',
            type: 'get',
            dataType: 'json',
            success: function (arr) {
                    for(let i in arr){
                        console.log(arr[i]);
                        if(i=='2022-06-01'){
                            option.series[0].data[0] = arr[i].member_count
                            option.series[1].data[0] = arr[i].member_view_count
                        }else if(i=='2022-06-03'){
                            option.series[0].data[1] = arr[i].member_count
                            option.series[1].data[1] = arr[i].member_view_count
                        }else if(i=='2022-06-05'){
                            option.series[0].data[2] = arr[i].member_count
                            option.series[1].data[2] = arr[i].member_view_count
                        }else if(i=='2022-06-07'){
                            option.series[0].data[3] = arr[i].member_count
                            option.series[1].data[3] = arr[i].member_view_count
                        }else if(i=='2022-06-09'){
                            option.series[0].data[4] = arr[i].member_count
                            option.series[1].data[4] = arr[i].member_view_count
                        }else if(i=='2022-06-11'){
                            option.series[0].data[5] = arr[i].member_count
                            option.series[1].data[5] = arr[i].member_view_count
                        }else if(i=='2022-06-13'){
                            option.series[0].data[6] = arr[i].member_count
                            option.series[1].data[6] = arr[i].member_view_count
                        }else if(i=='2022-06-15'){
                            option.series[0].data[7] = arr[i].member_count
                            option.series[1].data[7] = arr[i].member_view_count
                        }else if(i=='2022-06-17'){
                            option.series[0].data[8] = arr[i].member_count
                            option.series[1].data[8] = arr[i].member_view_count
                        }else if(i=='2022-06-19'){
                            option.series[0].data[9] = arr[i].member_count
                            option.series[1].data[9] = arr[i].member_view_count
                        }else if(i=='2022-06-21'){
                            option.series[0].data[10] = arr[i].member_count
                            option.series[1].data[10] = arr[i].member_view_count
                        }else if(i=='2022-06-23'){
                            option.series[0].data[11] = arr[i].member_count
                            option.series[1].data[11] = arr[i].member_view_count
                        }else if(i=='2022-06-25'){
                            option.series[0].data[12] = arr[i].member_count
                            option.series[1].data[12] = arr[i].member_view_count
                        }else if(i=='2022-06-27'){
                            option.series[0].data[13] = arr[i].member_count
                            option.series[1].data[13] = arr[i].member_view_count
                        }else if(i=='2022-06-29'){
                            option.series[0].data[14] = arr[i].member_count
                            option.series[1].data[14] = arr[i].member_view_count
                        }
                    }
                    myChart.setOption(option);
 
            }
        })
myChart.setOption(option);


    // $.ajax({
    //   url: "http://qqq/index.php",
    //   type: "get",
    //   dataType: "json",
    //   success: function (arr) {
    //     console.log(arr);
    //     for (let i in arr) {
    //       if (i == "2022-06-01") {
    //         option.series[0].data[0] = arr[i].member_count;
    //         option.series[1].data[0] = arr[i].member_view_count;
    //       } else if (i == "2022-06-03") {
    //         option.series[0].data[1] = arr[i].member_count;
    //         option.series[1].data[1] = arr[i].member_view_count;
    //       } else if (i == "2022-06-05") {
    //         option.series[0].data[2] = arr[i].member_count;
    //         option.series[1].data[2] = arr[i].member_view_count;
    //       } else if (i == "2022-06-07") {
    //         option.series[0].data[3] = arr[i].member_count;
    //         option.series[1].data[3] = arr[i].member_view_count;
    //       } else if (i == "2022-06-09") {
    //         option.series[0].data[4] = arr[i].member_count;
    //         option.series[1].data[4] = arr[i].member_view_count;
    //       } else if (i == "2022-06-11") {
    //         option.series[0].data[5] = arr[i].member_count;
    //         option.series[1].data[5] = arr[i].member_view_count;
    //       } else if (i == "2022-06-13") {
    //         option.series[0].data[6] = arr[i].member_count;
    //         option.series[1].data[6] = arr[i].member_view_count;
    //       } else if (i == "2022-06-15") {
    //         option.series[0].data[7] = arr[i].member_count;
    //         option.series[1].data[7] = arr[i].member_view_count;
    //       } else if (i == "2022-06-17") {
    //         option.series[0].data[8] = arr[i].member_count;
    //         option.series[1].data[8] = arr[i].member_view_count;
    //       } else if (i == "2022-06-19") {
    //         option.series[0].data[9] = arr[i].member_count;
    //         option.series[1].data[9] = arr[i].member_view_count;
    //       }
    //     }
    //     myChart.setOption(option);
    //   },
    // });
    // myChart.setOption(option);
</script>

</html>